<template>
    <div id="geRenCenter">
        <div class="main_box">
            <ul class="tabs clearfix">
                <a class="tab on">基础信息</a>
            </ul>
<!--            v-if="isLogin"-->
            <div class="main_cont form" v-if="isLogin">
                <form action="" >
                    <div class="form_group">
                        <div class="label">手机号:</div>
                        <div class="form_ctl">
                            <div class="text">{{obj.mobile}}</div>
                        </div>
                    </div>
                    <div class="form_group">
                        <div class="label">昵称:</div>
                        <div class="form_ctl">
                            <input type="text" v-model="obj.nickname" class="form_input" placeholder="请输入昵称">
                        </div>
                    </div>
                    <div class="form_group">
                        <div class="label">年龄:</div>
                        <div class="form_ctl">
                            <input type="text" v-model="obj.age" maxlength="2" oninput = "value=value.replace(/[^\d]/g,'')" class="form_input" placeholder="请输入年龄（100以内）">
                        </div>
                    </div>
                    <div class="form_group">
                        <div class="label">性别:</div>
                        <div class="form_ctl form_ctl_radio">
                            <input type="radio" v-model="obj.sex" class="radiobox" id="sex1" value="0" name="sex">
                            <label for="sex1">男</label>
                            <input type="radio" v-model="obj.sex" class="radiobox" id="sex2" value="1" name="sex">
                            <label for="sex2">女</label>
                        </div>
                    </div>
                    <div class="form_group">
                        <div class="label">个人头像:</div>
                        <div class="form_ctl upload_ctl">
                            <input type="hidden" v-model="obj.avatar">
                            <el-upload
                                    class="avatar-uploader"
                                    action="http://172.16.2.50:10001/core/teacher/uploadMsg"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload"
                            >
                                <img style="height: 100px;width: 100px" v-if="obj.avatar" v-model="obj.avatar" :src="obj.avatar" class="avatar" alt="">
                                <i v-else  class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                            <p class="tip">* 图片尺寸为800x800，图片大小&lt;500KB，建议使用真人照片，便于品牌宣传效果</p>
                        </div>
                    </div>
                    <div class="form_group">
                        <div class="label">&nbsp;</div>
                        <div class="form_ctl">
                            <button @click="baoCunYongHu" class="submit_btn xiugai">保存</button>
                        </div>
                    </div>
                </form>
            </div>
            <div class="main_cont form" v-else>
                <div class="form_group">
                    <div class="label">手机号:</div>
                    <div class="form_ctl">
                        <div class="text">{{ obj.mobile }}</div>
                    </div>
                </div>
                <div class="form_group">
                    <div class="label">昵称:</div>
                    <div class="form_ctl">
                        <div class="text">{{ obj.nickname }}</div>
                    </div>
                </div>
                <div class="form_group">
                    <div class="label">年龄:</div>
                    <div class="form_ctl">
                        <div class="text">{{ obj.age }}</div>
                    </div>
                </div>
                <div class="form_group">
                    <div class="label">性别:</div>
                    <div class="form_ctl">
                        <div class="text" v-if="obj.sex === 0">男</div>
                        <div class="text" v-else-if="obj.sex === 1">女</div>
                    </div>
                </div>
                <div class="form_group">
                    <div class="label">个人头像:</div>
                    <div class="form_ctl upload_ctl">
                        <input type="hidden" v-model="obj.avatar">
                        <div class="preview">
                            <img :src="obj.avatar" alt="" v-if="obj.avatar">
                            <i class="iconfont" v-else>&#xe6b2;</i>
                        </div>
                    </div>
                </div>
                <div class="form_group">
                    <div class="label">&nbsp;</div>
                    <div class="form_ctl">
                        <button @click="isLogin=true" class="submit_btn xiugai" >修改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: "GeRenCenter",

        data () {
            return {
                isLogin: false,
                region1: [],
                region2: [],
                errTip1: '',
                errTip2: '',
                obj: {
                    mobile: '',
                    nickname: '',
                    sex: '',
                    age:'',
                    avatar: '',
                }
            }
        },
        created () {
            //初始时加载数据，获取用户信息
            var aa=window.sessionStorage.getItem("mobile");
            this.obj.mobile=aa;
            this.initMember();
        },
        methods: {

            //修改用户信息的保存方法
            baoCunYongHu(){
                var that=this;
                this.$http.post(`/student/member/modifyStudentInformation`,this.obj).then(function (resp) {
                    that.$message.success(resp.data.msg);
                })

            },

            //图片上传成功后的回调
            handleAvatarSuccess(res, file) {
                this.obj.avatar = res;
            },
            //图片选择后的判断，是否为图片及图片大小限制
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },

            //初始化用户信息
            initMember(){
                var that=this;
                this.$http.get(`/student/member/findStudentBymobile/${this.obj.mobile}`).then(function (resp) {
                    that.obj=resp.data;
                })
            }
        },


    }
</script>

<style lang="scss" scoped>

    .upload_ctl{
        .preview{
            width: 100px;
            height: 100px;
            background-color: #f5f5f5;
            text-align: center;
            margin-bottom: 10px;
            i{
                line-height: 120px;
                font-size: 80px;
                color: #ddd;
            }
        }
    }
    .xiugai{
        margin-left: 110px;
    }
</style>